<template>
  <!-- 列表 -->
  <view>
    <view class="list-wrapper">
      <view class="list-item" v-for="(item, index) in list" :key="index" @click="toPage(item)">
        <view class="list-item-img">
          <view class="item-default-img flex-wrap flex-middle flex-center" :style="{
                        background: 'url(' + item.logoHttpUrl + ') center no-repeat'
                    }" v-if="item.logoHttpUrl">
            <view class="abs-tip-left-up" v-if="item.isTop == 1">
              <text class="abs-tip-yellow">置顶</text>
            </view>
          </view>
          <view class="item-default-img flex-wrap flex-middle flex-center" v-else>
            <!-- <view class="item-default-text ellipsis2">{{item.name}}</view> -->
            <view class="abs-tip-left-up" v-if="item.isTop == 1">
              <text class="abs-tip-yellow">置顶</text>
            </view>
          </view>
          <view class="list-item-data">
            <view class="title ellipsis">{{item.name}}</view>
            <view class="flex-wrap flex-middle">
              <text class="data-item">试题：{{item.totalQuestionsNum || 0}}</text>
              <text class="data-item">错题：{{item.mistakesNum || 0}}</text>
            </view>
          </view>
        </view>
        <view class="item-data">
          <view class="item-data-item flex-wrap flex-middle" key="2" >
            <text class="icon iconfont icon-wodefabu"></text>
            <text class="flex-item">智能练习</text>
            <view class="select-icon"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, toRefs, onMounted, watch, computed, getCurrentInstance} from 'vue';
const {$api, $uniPush, $toast} = getCurrentInstance().proxy;
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  vertical: { // 竖版显示
    type: Boolean,
    default: false
  },
  pageKey: { // 跳转id的key
    type: String,
    default: ''
  },
  progress: { // 是否显示课程学习进度（我的课程有效）
    type: Boolean,
    default: false
  },
  hideReco: {
    type: Boolean,
    default: false
  }
})
const {list, vertical, pageKey, progress, hideReco} = toRefs(props)

const statusList = ref({
  'P': '已参与',
  'I': '继续',
  'N': '未参与',
  'Q': '再次参与',
  'O': '已过期'
})

const toPage = (item) => {
  if (item.status === '1') {
    $uniPush({
      name: 'practice-start-id',
      params: {
        id: item.practiceId
      }
    })
  } else {
    $toast.warning(item.status === '2' ? '当前练习已过期' : '当前练习未开始')
  }
}

const toNote = (item) => {
  if (item.status !== "1") {
    $toast.warning(item.status === '2' ? '当前练习已过期' : '当前练习未开始')
    return
  }
  $uniPush({
    name: "practice-note-id",
    params: {
      type: 0
    },
    query: {
      practiceId: item.practiceId
    }
  })
  return false
}
</script>

<style lang="scss" scoped>
.list-wrapper{
  flex-wrap: wrap;
  padding-bottom: 4px;
  .list-item{
    width: 100%;
    padding: 0 0 10px;
    position: relative;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    .list-item-img{
      position: relative;
      width: 100%;
      height: 51.75vw;
      margin-bottom: 5px;
      border-radius: 6px 6px 0 0;
      overflow: hidden;
      .item-default-img{
        width: 100%;
        height: 51.75vw;
        background: url('../../static/image/course-img.png') no-repeat;
        background-size: contain !important;
        .item-default-text{
          font-size: 16px;
          color: #fff;
          text-align: center;
          padding: 0 10px;
        }
      }
      .list-item-data{
        position: absolute;
        font-size: 12px;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 66px;
        padding: 8px 15px;
        background: rgba(0, 0, 0, 0.5);
        .title{
          font-size: 16px;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 22px;
          margin-bottom: 8px;
        }
        .data-item{
          position: relative;
          padding: 0 5px 0 0;
          font-size: 12px;
          color: #fff;
          & + .data-item{
            &:before{
              content: '|';
              margin-right: 5px;
            }
          }
        }
      }
      .abs-tip-left-up{
        position: absolute;
        left: 4px;
        top: 0;
        line-height: 16px;
      }
    }
    .item-data{
      padding: 0 15px;
      .item-data-item{
        color: #333333;
        font-size: 14px;
        padding: 14px 0;
        .flex-item{
          font-weight: bold;
        }
        & + .item-data-item{
          border-top: 1px solid #EEEEEE;
        }
        .iconfont{
          margin-right: 10px;
          &.icon-a-1wodecuoti{
            margin-right: 8px;
            font-size: 20px;
            margin-left: -2px;
          }
        }
      }
    }

  }
}
</style>